import React, { ReactNode } from 'react';

import { SvgIcon } from '@/components/icon';

export interface CollapsibleSectionProps {
  title: string;
  subtitle?: string;
  isExpanded: boolean;
  onToggle: () => void;
  children: ReactNode;
  className?: string;
  extra?: ReactNode;
}

const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
  title,
  subtitle = '',
  isExpanded,
  onToggle,
  children,
  className = '',
  extra,
}) => {
  return (
    <div className={`${className}`}>
      <div
        className={`${
          isExpanded ? 'rounded-t-xl' : 'rounded-xl'
        } flex cursor-pointer items-center justify-between p-3 transition-all duration-200`}
        onClick={onToggle}
      >
        <div className="flex items-center gap-3">
          <div className="flex flex-col gap-2">
            <span className="text-sm font-font-weight-600 text-text-4">{title}</span>
            {subtitle && <span className="text-xs text-text-4">{subtitle}</span>}
          </div>
        </div>
        <div className="flex items-center gap-2">
          {!extra && (
            <SvgIcon
              icon="arrow-right"
              className={`h-4 w-4 text-gray-400 transition-transform duration-200 ${
                isExpanded ? 'rotate-90' : ''
              }`}
            />
          )}
          {extra}
        </div>
      </div>

      <div
        className={`overflow-hidden transition-all duration-300 ${
          isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
        }`}
      >
        <div className="rounded-b-xl">{children}</div>
      </div>
    </div>
  );
};

export default CollapsibleSection;
